<template>
   <div class="index-nav ">
        <div class="nav s-b" v-if='$store.state.isPc'>
           <div class="f-s">
                <router-link tag='img' :src="$store.state.logo" to='/' style='cursor:pointer;'></router-link>
                <!-- <img  alt=""> -->
                <!-- <el-menu mode="horizontal">
                    <el-submenu index="2">
                        <template slot="title">场外交易</template>
                            <el-menu-item index="2-1">我要买入</el-menu-item>
                            <el-menu-item index="2-2">我要出售</el-menu-item>
                            <el-menu-item index="2-3">发布广告</el-menu-item>
                    </el-submenu>
                </el-menu> -->
                <router-link tag='div' class="el-dropdown-link el-dropdown-selfdefine" to='/buy-bitcoin' style="margin-right : 30px;">場外交易</router-link>
                <router-link tag='div' class="el-dropdown-link el-dropdown-selfdefine" to='/exchange'>擔保交易</router-link>
            </div>
            <div class="f-s right">
                <!-- 未登录显示 -->
                <template v-if='!$store.state.userInfo.user_id'>
                    <router-link class="login" tag='div' to='/reg'>注册</router-link>
                    <router-link class="reg" tag='div' to='/login'>登入</router-link>
                </template>
                <!-- 已登录显示 -->
                <template v-else>
                    <el-dropdown @command='userMenu'>
                        <span class="el-dropdown-link">
                            <el-badge :value="hasNewMessage" class="item">
                                訂單
                            </el-badge>
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command='/my-order'>我的订单</el-dropdown-item>
                            <!-- <el-dropdown-item command='/my-order'>擔保交易</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown  @command='userMenu'>
                        <span class="el-dropdown-link">
                            錢包
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command='/my-wallet'>場外帳戶</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown @command='userMenu'>
                        <span class="el-dropdown-link">
                            {{$store.state.userInfo.nickname}}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command='/user-center'>用戶中心</el-dropdown-item>
                            <el-dropdown-item command='/my-ads'>我的廣告</el-dropdown-item>
                            <!-- <el-dropdown-item>邀請好友</el-dropdown-item> -->
                            <el-dropdown-item command='logout'>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
                <!-- <div class="login"></div>
                <div class="reg">登入</div> -->
            </div>
        </div>
        <div v-else>
            <div class="nav s-b">
                <div class="f-s">
                    <img src="@/assets/imgs/white-logo.png" alt="">
                </div>
                <div @click='toggleNav'>
                    顯示
                </div>
            </div>
        </div>
        <!-- 移动端导航内容 -->
        <div class="nav-content" v-if='showNavContent' :style="{height : windowHiehgt}">
            <div class="nav s-b" style="background : #fff;">
                <div class="f-s">
                    <img src="@/assets/imgs/white-logo.png" alt="">
                </div>
                <div @click='toggleNav'>
                    關閉
                </div>
            </div>
            <ul class="nav-list">
                <li>場外交易</li>
                <!-- 已登录显示更多内容 -->
                <li>禮品卡交易</li>
                <li>發佈廣告</li>
                <li>我的廣告</li>
                <li>邀請好友</li>
            </ul>
            <ul class="btns">
                <router-link class="login" tag='li' to='/reg'>注册</router-link>
                <router-link class="reg" tag='li' to='/login'>登入</router-link>
            </ul>
        </div>
   </div>
</template>

<script>
    import {CheckHasNewMsg} from '@/api/chat'
    import {EventBus} from  '@/util/eventBus'
    export default {
        data() {
            return {
                showNavContent : false,
                windowHiehgt : null,
                hasNewMessage : null,
                timer : null
            };
        },
        mounted () {
            this.windowHiehgt = `${window.innerHeight - 60}px`;

            //如果有登录状态，则开启轮训是否有消息
            if (this.$store.state.userInfo && this.$store.state.userInfo.user_id) {
                this.check()
                
                
                
            }
        },
        methods :{
            toggleNav () {
                this.showNavContent = !this.showNavContent;
            },
            userMenu (command) {
                if (command == 'logout') {
                    this.$store.commit('clearUserInfo');
                    this.$router.replace('/')
                } else {
                    this.$router.push(command)
                }
            },
            outSideTrade (command) {
                console.log('command :>> ', command);
                this.$router.push(command)
            },
            check () {
                CheckHasNewMsg().then(res => {
                    if (res.result.result) {
                        this.hasNewMessage = '...'
                        EventBus.$emit('hasNewMessage', res.result.result)
                    } else {
                        this.hasNewMessage = null
                    }
                    this.timer = setTimeout(() => {
                        this.check()
                    }, 5 * 1000);
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .nav {
            // padding-top: 170px;
            background: @mainColor;
            height: 60px;
            position: fixed;
            top: 0;
            left: 0;
            width: ~"calc(100% - 60px)";
            padding: 0 30px;
            z-index: 1987;
            .el-dropdown {
                &:hover {
                    .el-dropdown-link {
                        color: @mainColor;
                    }
                }
            }
        }
        .nav-content {
            position: fixed;
            top: 0;
            left: 0;
            z-index : 1987;
            width: 100%;
            padding-top: 60px;
            display: flex;
            background: #fff;
            justify-content: space-between;
            flex-direction: column;
            .nav {
                border-bottom: 1px solid #ccc;
            }
            .nav-list {
                // padding-left: 20%;
                font-weight: bold;
                font-size: 14px;
                padding: 0px 20px;
                display: block;
                margin-top: 15px;
                li {
                    font-size: 18px;
                    font-family: Cabin;
                    font-weight: bold;
                    line-height: 1.125rem;
                    color: rgb(57, 59, 89);
                    margin-bottom: 1.875rem;
                    width: fit-content;
                    margin-bottom: 30px;
                }
            }
            .btns {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                box-shadow: rgba(225, 234, 240, 0.8) 0px -0.0625rem 0.5rem 0px;
                padding: 10px 0;
                li {
                    font-size: 18px;
                    width: 80%;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    margin: 10px auto;
                    padding: 20px 0;
                    border-radius: 40px;
                    border: 1px solid #f1f1f1;
                }
                li:nth-child(1) {
                    background: @mainColor;
                    color: #fff;
                }
                li:nth-child(2) {
                    color: @mainColor;
                }
            }
        }
    }

    //pc端
    @media screen and (min-width : 670px) {
        .nav {
            // height: 70px;
            position: fixed;
            top: 0;
            left: 0;
            width: ~"calc(100% - 160px)";
            height: 70px;
            padding: 0 80px;
            background: #fff;
            z-index: 1987;
             box-shadow: rgba(225, 234, 240, 0.8) 0px 4px 8px 0px;
            .el-dropdown {
                &:hover {
                    .el-dropdown-link {
                        color: @mainColor;
                    }
                }
            }
            img {
                // width: 120px;
                // height: 28px;
				width : 50px;
				height : 50px;
                margin-right: 120px;
            }
            .el-dropdown-link {
                cursor: pointer;
                font-size: 17px;
            }

            .right {
                div {
                    cursor: pointer;
                    height: 30px;
                    font-size: 16px;
                    margin: 0 10px;
                    padding: 0 15px;
                    border-radius: 4px;
    
                    line-height: 30px;
                    
                }
                .reg {
                    background-image: linear-gradient(to left,#44bdff,#0080ff);
                    box-shadow: 0 4px 8px 0 rgba(5,127,210,0.27);
                    color: #fff;
                }
            }

            .nav-list {
                font-size: 15px;
                li {
                    padding: 0 15px;
                    cursor: pointer;
                }
                .cwjy {
                    position: relative;
                    .sub-nav {
                        display: none;
                        position : absolute;
                        top : 50px;
                        left : -20px;
                        background: #fff;
                        color: #000;
                        z-index: 1987;
                        li {
                            width: 120px;
                            padding: 15px 0;
                            text-align: center;
                            font-size: 14px;
                            &:hover {
                                color: @mainColor;
                            }
                        }
                    }
                    &:hover {
                        .sub-nav {
                            display: block;
                        }
                    }
                    
                }
            }
        }
    }
    
</style>